<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    :class="{'mobile-el-dialog': showMobilePage}"
    class="open-invoice-common-dialog"
  >
    <div :style="{height:tip?'64px':'46px'}" class="header">
      <el-image :src="tipIcon" class="img"/>
      <div v-if="summary" class="summary">
        <div class="content">{{ summary }}</div>
        <div v-if="tip" class="tip">{{ tip }}</div>
      </div>
    </div>
    <div class="main">
      <el-form
        ref="orderForm"
        :rules="rules"
        label-position="right"
        label-width="80px"
        class="setting-form">
        <el-form-item v-if="title === '项目订单退回确认'" label="退回节点" prop="backStatus">
          <el-select v-model="backStatus">
            <el-option :key="-1" :value="-1" label="上一步"/>
            <el-option
              v-for="item in currentBackList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isSendMsg" label="接收人" prop="userId">
          <!-- :loadmore-method="loadmoreMethod()" -->
          <selectWithUserLoad
            v-if="!receiveDisabled && dialogVisible"
            ref="selectOrderOperator"
            :disabled="receiveDisabled"
            v-model="receiveUsers"
            :default-list="defaultObjectUser || []"
            :hide-select-list="hideSelectList || []"
            :extend-params="{
              type: 1,
              ...loadUserParams
            }"
            value-type="object"
            style="width: 240px;"
            key-name="id"
            label-name="userName"
            multiple
            filterable
            collapse-tags
            clearable
            @change="userChange"
          />
          <div v-else-if="defaultObjectUser">
            <el-tag v-for="(item,index) in defaultObjectUser" :key="index" style="height: 25px;line-height: 24px;margin-right:5px;padding: 0 7px;">{{ item.userName }}</el-tag>
          </div>
        </el-form-item>
        <el-form-item v-if="isSendMsg" label="任务描述" prop="content">
          <el-input
            :rows="4"
            v-model="dingTalkMsg"
            resize="none"
            style="font-size: 13px;"
            type="textarea"
            maxlength="100"
            placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label-width="0px" label="" prop="userId" style="margin-bottom: 10px;">
          <div style="margin-left:80px">
            <el-checkbox v-model="isSendMsg"><span :style="{fontWeight:isSendMsg?'bold':'normal'}" style="color: #333333;">发送飞书通知</span></el-checkbox>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button :loading="loading" type="primary" size="small" style="margin-right:6px" @click="handelOK()">{{ btn1 }}</el-button>
      <el-button class="cancel-btn-style" type="info" size="small" @click="handleClose">{{ btn2 }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { allDeptlist } from '@/api/select';
import { handelDepartmentData } from '@/utils';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import ElMessage from '@/utils/message';
import { projectUserList } from '@/api/projectDetail';
import { mapState } from 'vuex';

import Title from '@/components/Title';
// icon
import tipIcon from '@/assets/project/tip.png';
export default {
  components: { Title, selectWithUserLoad },
  props: {
    title: {
      type: String,
      default: ''
    },
    btn1: {
      type: String,
      default: ''
    },
    btn2: {
      type: String,
      default: ''
    },
    summary: {
      type: String,
      default: ''
    },
    requestDept: {
      type: Boolean,
      default: false
    },
    status: {
      type: Number,
      default: 1
    },
    allDeptList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tip: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tipIcon,
      loading: false,
      dialogVisible: false,
      isSubmitCost: false,
      rules: {},
      loadUserParams: {},
      isSendMsg: true,
      receiveUsers: [],
      dingTalkMsg: '',
      extendParams: null,
      receiveDisabled: false,
      deptList: [],
      defaultObjectUser: [],
      notClearUser: false,
      hideSelectList: [],
      backStatus: -1, // 退回的步骤
      backList: [
        {
          value: 0,
          label: '待提交'
        },
        {
          value: 1,
          label: '待初审'
        },
        {
          value: 2,
          label: '待复审'
        }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    deptListOption: {
      get: function() {
        if (!this.requestDept) {
          return this.allDeptList;
        } else {
          return this.deptList;
        }
      }
    },
    currentBackList() {
      return this.extendParams ? this.backList.slice(0, this.extendParams.status).reverse() : this.backList.slice(0, this.backList.length - 1).reverse();
    }
  },
  created() {
    if (this.requestDept) {
      // this.getAllDeptList();
    }
  },
  methods: {
    handleClose() {
      if (!this.notClearUser) this.receiveUsers = [];
      // this.isSendMsg = false;
      // this.dingTalkMsg = '';
      this.dialogVisible = false;
      this.loading = false;
      this.backStatus = -1;
    },
    showDialog({ defaultMsg, extendParams, defaultObjectUser, receiveDisabled, loadUserParams, notClearUser }) {
      this.extendParams = extendParams || null;
      this.receiveDisabled = receiveDisabled || false;
      this.loadUserParams = loadUserParams || {};
      this.notClearUser = notClearUser;
      if (this.receiveUsers && this.receiveUsers.length) {
        this.defaultObjectUser = this.receiveUsers;
      }
      if (defaultObjectUser) {
        const list = _.uniqBy(defaultObjectUser, 'id');
        this.defaultObjectUser = list;
        this.receiveUsers = list;
      }
      this.dingTalkMsg = defaultMsg || '';
      this.dialogVisible = true;
    },
    handelOK() {
      if (this.isSendMsg && this.receiveUsers.length === 0) {
        ElMessage.error('请填写接收人');
        return;
      }
      if (this.isSendMsg && this.dingTalkMsg === '') {
        ElMessage.error('请填写任务描述');
        return;
      }
      let ids = [];
      if (this.receiveUsers) {
        ids = this.receiveUsers.map(i => i.id);
      }
      const data = {
        isSendMsg: this.isSendMsg,
        receiveUsers: ids.join(','),
        dingTalkMsg: this.dingTalkMsg,
        url: `${location.origin}?redirect=${this.$route.path}`,
        users: this.receiveUsers
      };
      if (this.extendParams) Object.assign(data, this.extendParams);
      if (this.backStatus !== -1) {
        data.status = this.backStatus;
      }
      this.loading = true;
      this.$emit('handelOK', data);
      this.handleClose();
    },
    getAllDeptList() {
      allDeptlist().then(res => {
        handelDepartmentData(res.data);
        this.deptList = res.data;
      });
    },
    userChange() {
      let deepCloneList = JSON.parse(JSON.stringify(this.receiveUsers));
      if (!this.hideSelectList || this.hideSelectList.length === 0) {
        this.hideSelectList = deepCloneList;
      } else {
        const ids = this.hideSelectList.map(i => i.id);
        deepCloneList = deepCloneList.filter(i => !ids.includes(i.id));
        this.hideSelectList = this.hideSelectList.concat(deepCloneList);
      }
    },
    // 获取账户名称的列表
    loadmoreMethod() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          projectUserList(params).then(res => {
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    }
  }
};
</script>

<style lang="scss" scoped>
.open-invoice-common-dialog{
  &::v-deep {
    .el-dialog{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width: 380px;
      border-radius: 8px;
      margin: 0 !important;
    }
    .el-dialog__header{
      margin: 0;
      padding: 0;
    }
    .el-dialog__body{
      padding: 0;
      margin: 0;
    }
  }
}
.header{
  display: flex;
  width: 100%;
  height: 46px;
  border-radius: 8px 8px 0px 0px;
  align-items: center;
  background: #fff2eb;
  margin-bottom: 17px;
  .img{
    width: 16px;
    height: 18px;
    margin:0 12px 0 24px;
  }
  .summary {
    img {
      display: block;
      margin: 0 auto;
      width: 80px;
      height: 80px;
    }
    .content {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 20px;
    }
    .tip{
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      line-height: 20px;
      color: #FD8546;
      margin-top: 1px;
    }
  }
}
.main {
  padding: 0 24px;
  & ::v-deep {
    .el-input {
      height: 32px;
      width: 240px;
      .el-input__inner {
        height: 32px !important;
        width: 240px;
      }
      .el-input__suffix {
        display: flex;
        align-items: center;
      }
    }
    .el-textarea__inner {
      padding: 5px 10px;
      width: 240px;
    }
    .el-tag--info {
      color: #406EFF;
      background-color: #ecf1ff;
      display: flex;
      justify-content: center;
      align-items: baseline;
    }
  }
}
.btn-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  padding-bottom: 29px;
}
</style>
